define(['jquery', 'vue', 'axios'], function ($, Vue, axios) {
    if (typeof require !== 'undefined') {
        Vue = require('vue'); // Adjust the path as necessary
    }
    Vue.prototype.$axios = axios;

    var TeacherBox = {
        props: ['user_id', 'type', 'leftOptions', 'rightOptions'], // 添加接收外部传递的数据
        template: `
    <div class="teacher-box" @mouseleave="selectAllLeftOptions">
        <div class="select-container">
            <div class="label" style="color:#000">已选</div>
            <select v-model="selectedLeft" :name="type === 'single' ? 'row[teacher_id][]' : 'row[teacher_id][]'" 
                class="form-control mustselected" :multiple="type !== 'single'" size="10" 
                @dblclick="moveRight" style="height:229px">
                <option v-for="option in localLeftOptions" :key="option.value" :value="option.value" :selected="type === 'single' && selectedLeft.includes(option.value)" v-if="option.group_id === 2" v-bind:selected="true">
                    {{ option.text }} ({{ option.phone }})
                </option>
            </select>
        </div>
        <div class="button-container">
            <button @click="moveRight">&gt;&gt;</button>
            <button @click="moveLeft">&lt;&lt;</button>
        </div>
        <div class="select-container">
            <div class="label" style="color:#000">备选</div>
            <input type="text" class="searchQuery"  v-model="searchQuery" placeholder="查询手机号、姓名" 
                @blur="fetchRightOptions"/>
            <select v-model="selectedRight" class="form-control" multiple size="10" @dblclick="moveLeft">
                <option v-for="option in localRightOptions" :key="option.value" :value="option.value" v-if="option.group_id === 2">
                    {{ option.text }} ({{ option.phone }})
                </option>
            </select>
        </div>
    </div>
`,
        data() {
            return {
                localLeftOptions: [],
                localRightOptions: [],
                selectedLeft: [],
                selectedRight: [],
                searchQuery: '',
            };
        },
        computed: {
            filteredRightOptions() {
                if (!this.searchQuery) return this.localRightOptions;
                const query = this.searchQuery.toLowerCase();
                return this.localRightOptions.filter(option =>
                    option.text.toLowerCase().includes(query) ||
                    option.phone.includes(query)
                );
            }
        },
        created() {
            this.localLeftOptions= [...this.leftOptions];
            this.localRightOptions=[...this.rightOptions];
            this.selectAllLeftOptions();
        },
        methods: {
            selectAllLeftOptions() {
                if (this.type === 'single') {
                    if (this.localLeftOptions.length > 0) {
                        this.selectedLeft = [this.localLeftOptions[0].value];
                    }
                } else {
                    this.selectedLeft = this.localLeftOptions.map(option => option.value);
                }
            },
            moveRight(event) {
                event.stopPropagation();
                event.preventDefault();
                const selectedItems = this.selectedLeft.map(item => this.localLeftOptions.find(option => option.value === item));

                // 检查当前方（即开始移动的这一方）是否已经有了要移动的选项
                selectedItems.forEach(item => {
                    const index = this.localLeftOptions.findIndex(option => option.value === item.value);
                    if (index !== -1) {
                        this.localLeftOptions.splice(index, 1);
                    }
                });

                this.localRightOptions.push(...selectedItems);
                this.selectedLeft = [];
                this.selectAllLeftOptions();
            },
            moveLeft(event) {
                event.stopPropagation();
                event.preventDefault();
                const selectedItems = this.selectedRight.map(item => this.localRightOptions.find(option => option.value === item));

                if (this.type === 'single') {
                    if (Array.isArray(this.localLeftOptions) && this.localLeftOptions.length > 0) {
                        //this.selectedLeft = this.localLeftOptions[0].value;
                    } else {
                        this.selectedLeft = [];
                    }
                } else {
                    // 检查当前方（即开始移动的这一方）是否已经有了要移动的选项
                    selectedItems.forEach(item => {
                        const index = this.localRightOptions.findIndex(option => option.value === item.value);
                        if (index !== -1) {
                            this.localRightOptions.splice(index, 1);
                        }
                    });

                    this.localLeftOptions.push(...selectedItems);
                }

                this.selectedRight = [];
                this.selectAllLeftOptions();
            },
            fetchRightOptions() {
                let url = '/user/user/lists?groupId2';
                if (this.searchQuery) {
                    url = `/user/user/lists?groupId=2&q=${encodeURIComponent(this.searchQuery)}`;
                }
                this.localRightOptions = [];
                this.$axios.get(url).then(response => {
                    const leftValues = this.localLeftOptions.map(option => option.value);
                    this.localRightOptions = response.data.list.filter(item => !leftValues.includes(item.value));
                });
            },
            fetchLeftOptions() {
                this.localLeftOptions = this.leftOptions
                    .filter(item => item.group_id === 2) // 过滤 group_id 为 2 的记录
                    .filter(item => !this.localLeftOptions.some(leftOption => leftOption.value === item.value)) // 过滤掉已经存在的选项
                    .map(item => ({
                        value: item.value,
                        text: item.text,
                        phone: item.phone
                    }));
                this.selectAllLeftOptions();
            }
        },
        updated() {

        },
        mounted() {
            const uniqueAttr = 'data-teacher-box';
            const style = document.createElement('style');
            style.innerHTML = `
                .teacher-box[${uniqueAttr}] {
                    display: flex;
                    justify-content: space-between;
                    align-items: stretch;
                }
                .teacher-box[${uniqueAttr}] .select-container {
                    display: flex;
                    flex-direction: column;
                    width: 200px;
                }
                .teacher-box[${uniqueAttr}] .label {
                    font-weight: bold;
                    margin-bottom: 5px;
                    color: black!important;
                }
                .teacher-box[${uniqueAttr}] .form-control {
                    width: 100%;
                    height: 200px;
                }
                .teacher-box[${uniqueAttr}] .button-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    min-height: 200px;
                }
                .teacher-box[${uniqueAttr}] .button-container button {
                    margin: 5px 0;
                }
            `;
            document.head.appendChild(style);
            this.$el.setAttribute(uniqueAttr, '');
        }
    };

    Vue.component('teacher-box', TeacherBox);

    if (typeof module !== 'undefined' && module.exports) {
        module.exports = TeacherBox;
    }
});
